<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>DOM操作</title>
		<script>
			function changeTitle() {
				// 获取 标题对象
				var objTitle = document.getElementById("bankTitle").innerHTML;
				console.info("objTile::" + objTitle);
				// 改变标题内容
				document.getElementById("bankTitle").innerHTML = "Welcome to 银行服务质量评价System";
			}

			function showService() {
				// 获取一组单选框对象
				// getElementsByName 名字相同的单选框对象的数组
				var arrServices = document.getElementsByName("service");
				// 选中状态标识:默认没有选中
				var isChecked = false;
				// 依次遍历数组对象
				for(var i = 0; i < arrServices.length; i++) {
					// 取出每一个单选框对象,使用checked属性判定单选框是否处于选中状态
					if(arrServices[i].checked){
						alert("您对本次服务的评价是："+arrServices[i].value);
						// 修改选择标识
						isChecked = true;
						// 因为单选，直接退出
						break;
					}					
				}
				// 判定是否进行选择
				if(isChecked == false){
					alert("请选择您对本次服务的评价");
				}
			}
			
			function showInput(){
				// 获取一组单选框对象
				// getElementsByName 名字相同的单选框对象的数组
				var arrServices = document.getElementsByName("improve");
				// 选中状态标识:默认没有选中
				var isChecked = false;
				// 拼写选择结果内容
				var strMsg = "您觉得本行需要改进的业务：";
				// 依次遍历数组对象
				for(var i = 0; i < arrServices.length; i++) {
					// 取出每一个单选框对象,使用checked属性判定单选框是否处于选中状态
					if(arrServices[i].checked){
						strMsg += "\n"+arrServices[i].value;
						// 修改选择标识
						isChecked = true;
					}					
				}
				// 判定是否进行选择
				if(isChecked == false){
					alert("请选您觉得本行需要改进业务!");
				}else{
					alert(strMsg);
				}
			}
		</script>
	</head>

	<body>
		<div>
			<h3 id="bankTitle">欢迎进入银行服务质量评价系统</h3>
		</div>
		<p>
			您对本次服务的满意程度：
			<input type="radio" id="service1" name="service" value="非常满意" />非常满意
			<input type="radio" id="service2" name="service" value="满意" />满意
			<input type="radio" id="service3" name="service" value="不满意" />不满意
		</p>
		<p>您觉得本行下列哪些业务需要改进：</p>
		<p>
			<input type="checkbox" name="improve" value="网点数目" />网点数目
			<input type="checkbox" name="improve" value="内部环境" />内部环境
			<input type="checkbox" name="improve" value="窗口数量" />窗口数量
			<input type="checkbox" name="improve" value="ATM数量" /> ATM数量
		</p>
		<p>
			<input type="checkbox" name="improve" value="业务种类" />业务种类
			<input type="checkbox" name="improve" value="手续简便" />手续简便
			<input type="checkbox" name="improve" value="客服态度" />客服态度
			<input type="checkbox" name="improve" value="等待时间" />等待时间
		</p>
		<p>
			<input type="button" name="changeTitle" value="改变标题" onclick="changeTitle()" />
			<input type="button" name="showService" value="显示满意度选项" onclick="showService()" />
			<input type="button" name="showInput" value="显示input元素个数" onclick="showInput()" />
		</p>
	</body>

</html>